import React, { Component } from 'react';
import { toast } from 'react-toastify';
import { Form, Row, Input, Col, Button, Table, Popconfirm, Icon, Modal, Checkbox, Select } from 'antd';
import * as fetch from '../../utils/http'
import { sign } from 'crypto';

class ErrorSetting extends Component {
    constructor(props) {
        super(props)
        this.state = {
            errorSetList: [],
            signalList: []
        }
        this.getAllError()
        // this.getAllSignal()
    }

    getAllError() {
        fetch.get('WarningSet/GetWarningSetList').then(res => {
            this.setState({
                errorSetList: res.data.warningSets || [],
                signalList: res.data.porperties || []
            }, () => { console.log(this.state.errorSetList) })
        })
    }

    // getAllSignal() {
    //     fetch.get('DeviceItemProperty/GetDeviceItemPropertys').then(res => {
    //         this.setState({
    //             signalList: res.data || []
    //         })
    //     })
    // }

    newErrorItem() {
        const { errorSetList } = this.state
        const newErrorItem = {
            propertyID: '',
            lowValue: 0,
            highValue: 0,
            id: '',
            time: new Date().getTime()
        }
        errorSetList.unshift(newErrorItem)
        this.setState({
            errorSetList
        })
    }

    saveErrorItem(item) {
        const params = Object.assign({}, item)
        if (item.propertyID) {
            let url = item.id ? 'WarningSet/Edit' : 'WarningSet/Add'
            let msg = item.id ? '修改成功' : '添加成功'
            fetch.post(url, params).then(res => {
                this.getAllError()
                toast.success(msg)
            })
        } else {
            toast.warn('请先选择一个信号')
        }
    }

    onDelErrorItem(item) {
        const { id } = item
        fetch.post('WarningSet/Delete', { id }).then(res => {
            this.getAllError()
        })
    }

    selectValueChnage(item, field, e) {
        const { errorSetList } = this.state
        item[field] = e
        this.setState({
            errorSetList
        })
    }

    removeUnSave(index) {
        const { errorSetList } = this.state
        errorSetList.splice(index, 1)
        this.setState({
            errorSetList
        })
    }

    inputValueChnage(item, field, e) {
        const { errorSetList } = this.state
        item[field] = e.target.value
        this.setState({
            errorSetList
        })
    }

    render() {
        const { errorSetList, signalList } = this.state
        const columns = [
            {
                title: '报警值',
                width: 400,
                key: 'propertyID',
                render: item => ((
                    item.id ? <div>{item.signNo}</div> :
                        <Select style={{ width: '100%' }} defaultValue={item.propertyID ? item.signNo : ''} onChange={(e) => this.selectValueChnage(item, 'propertyID', e)} >
                            <Select.Option value="">请选择一个信号</Select.Option>
                            {
                                signalList.map(child => {
                                    return (
                                        <Select.Option value={child.id}>{child.signNo}</Select.Option>
                                    )
                                })
                            }
                        </Select>
                ))
            },
            {
                title: '下限值',
                key: 'lowValue',
                render: item => ((<Input type="number" value={item.lowValue} onChange={(e) => this.inputValueChnage(item, 'lowValue', e)}></Input>))
            },
            {
                title: '上限值',
                key: 'highValue',
                render: item => ((<Input type="number" value={item.highValue} onChange={(e) => this.inputValueChnage(item, 'highValue', e)}></Input>))
            },
            {
                title: '操作',
                width: 100,
                render: (item, record, index) => (
                    (<Row type="flex" justify="space-between">
                        <Col><Button style={{ width: '30px' }} type="primary" size="small" onClick={this.saveErrorItem.bind(this, item)} icon="save"></Button></Col>
                        {
                            item.id ?
                                <Col> <Popconfirm
                                    onConfirm={this.onDelErrorItem.bind(this, item)}
                                    title="确定删除吗？"
                                    okText="删除"
                                    cancelText="取消"
                                    icon={<Icon type="question-circle-o" style={{ color: 'red' }} />}
                                >
                                    <Button style={{ width: '30px' }} type="danger" size="small" icon="delete"></Button>
                                </Popconfirm></Col>
                                :
                                <Button style={{ width: '30px' }} size="small" onClick={this.removeUnSave.bind(this, index)} icon="close"></Button>
                        }
                    </Row>)
                )
            },
        ]
        return (
            <div>
                <h3>报警设置</h3>
                <Button type="primary" onClick={this.newErrorItem.bind(this)}>新增报警项</Button>
                <div style={{ padding: '10px 0px' }}>
                    <Table bordered dataSource={errorSetList} columns={columns} rowKey="id" pagination={false}></Table>
                </div>
            </div >
        );
    }
}

export default ErrorSetting;